<template>
<div class="header" v-if="route.path!=='/login'">
    <div class="layout information">
		<img :src="props.user.img" alt="">
		<span class="userName">{{ props.user.userName }}</span>
	</div>
    <div class="nav navigator">
        <div class="navItem" v-for="(item, index) in navList" @click="clickHandler(index)" :key="item"
            :class="index === val ? 'active' : ''">
            <span v-if="index!==2">{{ item }}</span>
            <span v-else>{{ navList[2] = props.user.userName==='未登录'?'登录':'退出登录' }}</span>
        </div>
    </div>
</div>  
</template>

<script setup>
import { useRoute,useRouter } from 'vue-router';
import { ref,onMounted } from 'vue';
const route = useRoute()
const props = defineProps(['user'])
const emits =  defineEmits(['signOut'])

const router = useRouter()
const val = ref(0)
const navList = ref(['推文', '发帖', '登录'])

const clickHandler = function (index) {
    val.value = index
    if(index == 0) {
        router.push({
            path:'/'
        })
    }else if(index==1) {
         router.push({
            path:'/writer'
        })
    }else if(navList.value[2]==='登录'){
         router.push({
            path:'/login'
        })
    }else {
        emits('signOut')
    }
}


</script>

<style lang="scss" scoped>
.header {
    width: 100%;
    height: 85px;
    position: absolute;
    top: 0;
    z-index: 9999;
    display: flex;
    background: #222;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .information {
        margin-left: 40px;
        margin-top: 20px;
    }

    .navigator {
        margin-right: 40px;
        margin-top: 10px;
    }
}

.main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: auto;
    min-height: 600px;
}

.nav {
    height: 60px;
    width: 560px;
    display: flex;
    align-items: stretch;
    flex-direction: row;
    border: 3px solid rgb(70,70,70);
     border-radius: 60px;
    .navItem {
        flex-grow: 1;
        background-color: rgb(17,17,17);
        font-family: 'zzz-font';
        font-size: 30px;
        line-height: 60px;
        text-align: center;
        color: #fff;
    }

    .navItem:first-child {
        border-radius: 60px 0px 0px 60px;

    }

    .navItem:last-child {
        border-radius: 0px 60px 60px 0px;

    }
}
.active {
    flex-grow: 2 !important;
    background-color: rgb(221, 210, 0) !important;
    color: #000 !important;
    box-shadow: 0px 4px 51px 0px rgba(221, 210, 0, 0.3);
}

.layout {
	width: 300px;
	height: 60px;
	border: 3px solid rgb(70, 70, 70);
	background: repeating-linear-gradient(to bottom,rgb(50,50,50),rgb(20,20,20));
	border-radius: 100px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	img {
		position: relative;
		top: -15px;
		flex: 1;
		height: 60px;
		width: 60px;
		border-radius: 100px;
		border: 2px solid black;
	}

	.userName {
		position: relative;
		top: -15px;
		font-size: 20px;
		font-family: "zzz-font";
		color: #fff;
	}
}

</style>